<template>
	<view class="bg-white">
		<cu-custom title="机构申请注册" ></cu-custom>
		<view class="b-b-8 p-b-10" style="position: relative;">
			<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: red; font-size: 22px;">*</text>机构名称</view>
			<input class="org-text f-14" placeholder="请输入机构名称,15字以内" maxlength="15" @input="descInput" 
		    v-model="dataInfo"/>
			<text 
			                style="position: absolute;
							z-index: 99;
			                right: 30rpx;
							margin-top:-60rpx;
			                font-size:24rpx;
			                color: #999;">{{ start }}/15</text>
		
			
		</view>
		<view class="b-b-8 p-b-10" style="position: relative;">
			<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: red; font-size: 22px;">*</text>请选择机构开设的辅导科目（可多选）</view>
			<view class="f-s-16 f-w-b m-l-10 m-t-15">乐器类</view>
			<view class="m-10">
				<checkbox-group @change="checkboxChange"  class="m-t-10">
								<label class="uni-list-cell uni-list-cell-pd m-t-10" style="display: -webkit-inline-box; width: 25%;" v-for="item in items" :key="item.value">
									<view class="m-r-5">
										<checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.6)"/>
									</view>
									<view class="f-16 m-r-15 m-t-5">{{item.name}}</view>
								</label>
							</checkbox-group>
			</view>
			<view class="f-s-16 f-w-b m-l-10 m-t-15">书法绘画类</view>
			<view class="m-10">
				<checkbox-group @change="checkboxChange"  class="m-t-10">
								<label class="uni-list-cell uni-list-cell-pd m-t-10" style="display: -webkit-inline-box; width: 25%;" v-for="item in items" :key="item.value">
									<view class="m-r-5">
										<checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.6)"/>
									</view>
									<view class="f-16 m-r-15 m-t-5">{{item.name}}</view>
								</label>
							</checkbox-group>
			</view>
			<view class="f-s-16 f-w-b m-l-10 m-t-15">声乐舞蹈类</view>
			<view class="m-10">
				<checkbox-group @change="checkboxChange"  class="m-t-10">
								<label class="uni-list-cell uni-list-cell-pd m-t-10" style="display: -webkit-inline-box; width: 25%;" v-for="item in items" :key="item.value">
									<view class="m-r-5">
										<checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.6)"/>
									</view>
									<view class="f-16 m-r-15 m-t-5">{{item.name}}</view>
								</label>
							</checkbox-group>
			</view>
			<view class="f-s-16 f-w-b m-l-10 m-t-15">素质类</view>
			<view class="m-10">
				<checkbox-group @change="checkboxChange"  class="m-t-10">
								<label class="uni-list-cell uni-list-cell-pd m-t-10" style="display: -webkit-inline-box; width: 25%;" v-for="item in items" :key="item.value">
									<view class="m-r-5">
										<checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.6)"/>
									</view>
									<view class="f-16 m-r-15 m-t-5">{{item.name}}</view>
								</label>
							</checkbox-group>
			</view>
		
			
		</view>
		
		<view class="b-b-8 p-b-10" style="position: relative;">
			<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: red; font-size: 22px;">*</text>请选择辅导机构的年级</view>
			<view class="flex m-15"><uni-data-select 
			        v-model="value1"
			        :localdata="range1"
			        @change="change1"
					style="width: 45%; !important" 
			      ></uni-data-select><text style=" line-height: 45px; padding: 0 10px;">至 </text>
				  <uni-data-select style="width: 45%; !important" 
			        v-model="value2"
			        :localdata="range2"
			        @change="change2"
			      ></uni-data-select></view>
			 
		
			
		</view>
		<view class="b-b-8 p-b-10 p-b-15" style="position: relative;">
			<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: red; font-size: 22px;">*</text>请选择请选择机构所在的省份和城市</view>
			<view class="slect-add m-15 p-l-15">
			<pickerAddress @change="changeadd" style="height: 40px;">
					{{addvalue}}
				</pickerAddress>
			</view>
			<input class="detail-add m-15 p-l-15" placeholder="详细地址:如街道/门牌号/小区/乡镇/村等" />
		
			
		</view>
		<view class="b-b-8 p-b-10" style="position: relative;">
			<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: red; font-size: 22px;">*</text>请选择机构老师总数</view>
			<view class="flex m-15"><uni-data-select 
			        v-model="value3"
			        :localdata="range3"
			        @change="change3"
					style="width: 45%; !important" 
			      ></uni-data-select></view>
			 
		
			
		</view>
		<view class="b-b-8 p-b-10 p-t-10" >
			<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: red; font-size: 22px;">*</text>请上传机构营业执照</view>
			<view class="p-s-r m-l-15">
			<uni-file-picker  class="m-t-15 upload-img"
				v-model="imageValue"  
				file-mediatype="image"
				mode="grid"
				file-extname="png,jpg"
				:limit="1"
				
				@progress="progress" 
				@success="success" 
				@fail="fail" 
				@select="select"
			/>
			<!-- <text class="p-s-a" style="margin-top: -30px; margin-left: 35px; font-weight: bold; color: #999;">上传照片</text> -->
			</view>
		</view>
		<view class="b-b-8 p-b-10 p-t-10" >
			<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: #fff; font-size: 22px;">*</text>范例</view>
			<view class="flex" style=" width: 60%; margin: 15px 20%;">
				<view class="fan-li f-l" style="width: 44%; margin: 0 3%; height: 140px;  border: 1px solid #eee;"><image src="../../static/img/1.png" height="60px" mode="aspectFit"></image></view>
				<view class="fan-li f-l" style="width: 44%; margin: 0 3%; height: 140px;  border: 1px solid #eee;"><image src="../../static/img/1.png" height="60px" mode="aspectFit"></image></view>
			</view>
			
		</view>
		<view class="form-detail" style="border-bottom:1px solid #f8f8f8 ;">
			<view class="l-m-b l-m-l">
				
				<text class="f-w-b">法人姓名</text>
			</view>
			<view class="l-m-b l-m-r location-i">
				
				<input placeholder="请输入法人姓名"/>
				
			</view>
		</view>
		<view class="form-detail" style="border-bottom:1px solid #f8f8f8 ;">
			<view class="l-m-b l-m-l">
				
				<text class="f-w-b">联系电话</text>
			</view>
			<view class="l-m-b l-m-r location-i">
				
				<input placeholder="请输入联系电话"/>
				
			</view>
		</view>
		<view class="form-detail" style="border-bottom:1px solid #f8f8f8 ;">
			<view class="l-m-b l-m-l">
				
				<text class="f-w-b">法人身份证号</text>
			</view>
			<view class="l-m-b l-m-r location-i">
				
				<input placeholder="请输入法人身份证号"/>
				
			</view>
		</view>
		<view class="b-b-8 p-b-10 p-t-10" >
			<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: #fff; font-size: 22px;">*</text>请上传法人身份证正反面</view>
			<view class="p-15">
			<Rboy-upload-sfz :obverse-url="formData.obverseUrl" :reverse-url="formData.reverseUrl" @selectChange="sfz_chagne" @del="del_btn"></Rboy-upload-sfz>
			</view>
		</view>
		<view class="b-b-8 p-b-10 p-t-10" >
			<view class="f-s-16 f-w-b"><text style="padding-left: 5px; color: #fff; font-size: 22px;">*</text>请上传本人与身份证合照</view>
			<view class="p-s-r m-l-15">
			<uni-file-picker  class="m-t-15 upload-img"
				v-model="imageValue"  
				file-mediatype="image"
				mode="grid"
				file-extname="png,jpg"
				:limit="1"
				
				@progress="progress" 
				@success="success" 
				@fail="fail" 
				@select="select"
			/>
			</view>
			
		</view>
		<view class="uni-form-item uni-column in-text b-t-n b-u-c m-15 m-t-30 c-l m-b-30" style="padding-bottom: 30px;">
			<button> 提交认证信息</button>
		</view>
	</view>
</template>

<script>
	import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'
	import RboyUploadSfz from "@/components/Rboy-upload-sfz/Rboy-upload-sfz.vue"
	export default {
		components:{RboyUploadSfz,pickerAddress},
		data() {
			return {
				// provincedata:[{  text:'', value:'', selfData:provinceData, }],
				// place: '',
				
				addvalue:"请选择地区",
				start: 0,
				dataInfo: '',
				imageValue:[],
				formData: {
				// 正面
				obverseUrl: "",
				// 反面
				reverseUrl: "",
				},
				items: [{
						value: 'gangqin',
						name: '钢琴'
					},
					{
						value: 'xiaotiqin',
						name: '小提琴',
						
					},
					{
						value: 'guzheng',
						name: '古筝'
					},
					{
						value: 'shoufengqin',
						name: '手风琴'
					},
					{
						value: 'changdi',
						name: '长笛'
					},
					{
						value: 'ukll',
						name: '尤克里里'
					},
					
					{
						value: 'sks',
						name: '萨克斯'
					},
					{
						value: 'ztq',
						name: '中提琴'
					},
					{
						value: 'spj',
						name: '双排键'
					},
					{
						value: 'dtq',
						name: '大提琴'
					}
				],
				 value1: '',
				  value2: '',
				  value3: '',
				  range1: [
					{ value: 0, text: "一年级" },
					{ value: 1, text: "二年级" },
					{ value: 2, text: "三年级" },
				  ],
				  range2: [
					{ value: 0, text: "一年级" },
					{ value: 1, text: "二年级" },
					{ value: 2, text: "三年级" },
					{ value: 2, text: "大学" },
				  ],
				  range3: [
				  					{ value: 0, text: "1" },
				  					{ value: 1, text: "2" },
				  					{ value: 2, text: "3" },
				  					{ value: 2, text: "4" },
				  ],
				// range:[{value:'yinianji',name:'一年级'},]
			}
		},
		methods: {
			descInput() {
				let txtVal = this.dataInfo.length;
				this.start = txtVal;
			},
			checkboxChange: function (e) {
				var items = this.items,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.value)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
			},
			 change1(e) {
			      console.log("e:", e);
			    },
			change2(e) {
				 console.log("e:", e);
			   },
			change3(e) {
				 console.log("e:", e);
			   },
			changeadd(data) {
							this.addvalue = data.data.join('')
			},
			
			// 身份证
			// 上传
			sfz_chagne(e) {
			    if (e.name == "obverse") {
			        this.formData.obverseUrl = e.tempFilePath
			    } else if (e.name == "reverse") {
			        this.formData.reverseUrl = e.tempFilePath
			    }
			},
			// 删除
			del_btn(e) {
			    if (e.name == "obverse") {
			        this.formData.obverseUrl = ""
			    } else if (e.name == "reverse") {
			        this.formData.reverseUrl = ""
			    }
			},
			changeadd(data) {
							this.addvalue = data.data.join('')
						}
		}
	}
</script>

<style lang="less" scoped>
@import '@/static/css/common.css';
input.org-text{ background: #f5f5f5; width: 96%; margin: 5px 2%; height: 45px; line-height: 45px;  padding-left: 10px; border-radius: 3px;}
.text-ex{width: 96%; margin: 5px 2%; height: 45px; color: #999; }
.form-detail{ height: 60px; line-height: 60px;
input{ text-align: right; height: 50px; line-height: 50px;}
}
.form-detail{ background: #fff; font-size: 32rpx;  }
.l-m-b{ display: flex; 
uni-image{ max-height: 35rpx;max-width: 40rpx; margin-top: 30rpx;}
}
.img-s{ height: 35px; width: 35px;}
.l-m-l{ float: left; padding-left: 35rpx; font-weight: bold;}
.l-m-r{ float: right; padding-right: 35rpx;  text-align: right; display: ;}
.location-i{
	width: 70%;
	input{ margin-top: 0; padding-top: 0; height: 60px; line-height:60px; width: 100%; font-size: 14px; margin-right: 10px;}
}
.file-title{
	span{ text-align: center;}
}
.file-count{ display: none !important;}
.upload-img{ 
.is-add{padding-bottom: 20px;}
}
.fan-li{
	image{ height: 140px;}
	}
.uni-list-cell {
	// justify-content: flex-start; width: 35% !important;
}
.slect-add{ border: 1px solid #e8e8e8; line-height: 40px; border-radius: 3px;}
.detail-add{border: 1px solid #e8e8e8; line-height: 40px; border-radius: 3px; height: 40px;}
</style>
